<template>
    <div class="app-container">
      <!-- <div class="u-f u-f-ac">
        <b class="lable font14 text_black text_right">{{$t('短信接口设置')}}</b>
        <span class="lable font14 text_black">{{$t('不知道怎么申请短信接口')}},{{$t('可以点击这')}}</span>
        <el-link
          href="http://cdbht.szmcjf.com/help/sms/qcloud"
          class="text_blue"
          target="_blank"
        >{{$t('查看文档详细信息')}}</el-link>
      </div> -->
      <div class="end_order ipt_list u-f u-f-ac">
        <span class="lable font14 text_black">appid：</span>
        <el-input v-model="appid" :placeholder="$t('请输入')"></el-input>
      </div>
      <div class="end_order ipt_list u-f u-f-ac">
        <span class="lable font14 text_black">AppSecret：</span>
        <el-input v-model="appsecret" :placeholder="$t('请输入')"></el-input>
      </div>
      <!-- <div class="end_order ipt_list u-f u-f-ac">
        <span class="lable font14 text_black">{{$t('令牌(Token)')}}：</span>
        <el-input v-model="token" :placeholder="$t('请输入')"></el-input>
      </div>
      <div class="end_order ipt_list u-f u-f-ac">
        <span class="lable font14 text_black">{{$t('消息加解密密钥 (EncodingAESKey)')}}：</span>
        <el-input v-model="aeskey" :placeholder="$t('请输入')"></el-input>
      </div> -->
      <div class="end_order ipt_list u-f u-f-ac">
        <span class="lable font14 text_black">{{$t('离线后多久推送')}}：</span>
        <el-input v-model="lixian" :placeholder="$t('请输入')"></el-input>分钟
      </div>
      <div class="end_order ipt_list u-f u-f-ac">
        <span class="lable font14 text_black">{{$t('模板id')}}：</span>
        <el-input v-model="template_id" :placeholder="$t('请输入')"></el-input>
      </div>

      <el-button
        class="note_btn"
        type="primary"
        @click="submits"
      >{{$t('提交')}}</el-button>
      
      <refresh @click="getData"></refresh>
    </div>
  </template>
  <script>
  import util from "@/assets/js/util.js";
  import { mapState } from "vuex";
  export default {
    name: "official",
    data() {
      return {
        appid: "",
        appsecret: "",
        token: "",
        aeskey: "",
        template_id: "",
        lixian: ""
      };
    },
    computed: {
      ...mapState(["permissions"])
    },
    mounted() {
      this.getData();
    },
    methods: {
      getData() {
        util
          .$http("/set/info", {
            type: "official"
          })
          .then(res => {
            if (res.code == 1) {
                this.appid = res.data.appid;
                this.appsecret = res.data.appsecret;
                this.token = res.data.token;
                this.aeskey = res.data.aeskey;
                this.template_id = res.data.template_id;
                this.lixian = res.data.lixian;
            //   this.minute = res.data.time;
            //   this.appid = res.data.appid;
            //   this.appkey = res.data.appkey;
            //   this.templates = res.data.template_id;
            //   this.signature = res.data.sign_name;
            //   this.SMS_variable = res.data.code_name;
            //   this.variable_time = res.data.time_name;
            //   this.textarea = res.data.param;
            }
          });
      },
      submits() {
        util
          .$http("/set/official", {
            appid: this.appid,
            appsecret: this.appsecret,
            token: this.token,
            aeskey: this.aeskey,
            template_id: this.template_id,
            lixian: this.lixian
          })
          .then(res => {
            if (res.code == 1) {
              this.$message({
                message: res.msg,
                type: "success"
              });
              this.getData();
            }
          });
      }
    }
  };
  </script>
  <style scoped>
  .app-container .ipt_list {
    margin: 15px 0 0 300px;
  }
  .app-container .ipt_list .lable {
    display: inline-block;
    width: 120px;
  }
  .app-container .ipt_list .el-input {
    width: 500px;
    margin-right: 15px;
  }
  .app-container .end_order {
    padding-left: 50px;
  }
  .app-container .text_right {
    margin-right: 30px;
  }
  .app-container .el-link--inner {
    color: #f56c6c;
  }
  .app-container .el-textarea {
    width: 500px;
  }
  .app-container .note_btn {
    margin: 30px 0 0 500px;
  }
  </style>
  <style>
  .el-link--inner {
    color: #409eff;
  }
  .end_order .el-textarea__inner {
    min-height: 90px !important;
  }
  </style>
  